<template>
  <div>
    <Row class="clearfix" :gutter='32'>
      <Col span="12" class="card">
      <Card>
        <p slot="title">欢迎回来!</p>
        <p class="admin">{{userName}}</p>
        <p class="date">{{currentdate}}</p>
      </Card>
      </Col>
      <Col span="12" class="card">
      <Card>
        <div class="box">
          <p class="p-title">未上传成绩比赛</p>
          <p class="number" style="cursor:pointer;" @click="hrefScore">{{bannerScore}}<span>场</span></p>
        </div>
        <div class="box">
          <p class="p-title">待审核赛事</p>
          <p class="number" style="cursor:pointer;" @click="hrefStatus">{{bannerStatus}}<span>项</span></p>
        </div>
      </Card>
      </Col>
    </Row>
    <Row style="padding-top:20px">
      <Card>
        <p class="table-title">未进行比赛：</p>
        <Table :loading="loading" stripe border :columns="tableColumns" :data="tableData"></Table>
        <page-temp :total="total" :current="page.pageNo" :size="page.pageSize" @changePage='changePage'></page-temp>
      </Card>
    </Row>
  </div>
</template>

<script>
import dict from "_c/dict/dict.vue";
import dictSpan from "_c/dict/dict-span.vue";
import { fieldAddress } from "@/config/utils";
import { getDict } from "@/api/configure";
import Api from "@/api/game";
const api = new Api();
// 赛事管理
export default {
  components: {
    dict,
    dictSpan
  },
  data() {
    return {
      loading: true,
      bannerScore: 0,
      bannerStatus: 0,
      userName: this.$store.state.user.userName,
      total: 0,
      currentdate: this.$moment().format("YYYY-MM-DD"),
      page: {
        pageSize: this.$config.PAGE_SIZE,
        pageNo: 1
      },
      units: [],
      AGOUTS: [],
      AGINS: [],
      tableColumns: [
        {
          title: "序号",
          width: 80,
          align: "left",
          render: (h, params) => {
            return h(
              "span",
              this.page.pageSize * (this.page.pageNo - 1) + params.index + 1
            );
          }
        },
        {
          title: "比赛名称",
          key: "fieldName",
          align: "left",
          ellipsis: true,
          render: (h, params) => {
            let self = this;
            let title = self.$config.userName(
              params.row.fieldName,
              params.row.fieldEnglishName
            );
            return h("span", { domProps: { title } }, title);
          }
        },
        {
          title: "赛事类型",
          key: "kindCode",
          align: "left",
          render: (h, params) => {
            return h(dictSpan, {
              props: { code: "ZGX_SSDJ", value: params.row.kindCode }
            });
          }
        },
        {
          title: "比赛级别",
          key: "gradeCode",
          align: "left",
          render: (h, params) => {
            return h(dictSpan, {
              props: {
                code: "ZGX_BSJB",
                parentCode: params.row.kindCode,
                value: params.row.gradeCode
              }
            });
          }
        },
        {
          title: "比赛时间",
          key: "fieldTime",
          align: "left",
          ellipsis: true,
          render: (h, params) => {
            let self = this;
            let title = self.$config.getDate(
              params.row.fieldTime,
              params.row.fieldEndTime
            );
            return h("span", { domProps: { title } }, title);
          }
        },
        {
          title: "比赛地点",
          key: "fieldAddressCountry",
          align: "left",
          ellipsis: true,
          render: (h, params) => {
            let self = this;
            let title = self.$config.fieldAddress(
              params.row,
              self.AGOUTS,
              self.AGINS
            );
            return h("span", { domProps: { title } }, title);
          }
        },
        {
          title: "比赛球场",
          key: "fieldCourt",
          align: "left",
          ellipsis: true,
          render: (h, params) => {
            let self = this;
            let title = params.row.fieldCourt;
            return h("span", { domProps: { title } }, title);
          }
        },
        {
          title: "承办单位",
          key: "operatingCompany",
          align: "left",
          ellipsis: true,
          render: (h, params) => {
            let self = this;
            let row = self.units.find(
              x => x.teamId === params.row.operatingCompany
            ) || { teamName: params.row.operatingCompany };
            let title = row.teamName;
            return h("span", { domProps: { title } }, title);
          }
        }
      ],
      tableData: []
    };
  },
  created() {
    let self = this;
    self.queryScore();
    self.queryStatus();
    Promise.all([
      getDict({ code: "AG_OUT" }),
      getDict({ code: "AG_IN" }),
      getDict({ code: "CBDW" })
    ])
      .then(data => {
        self.AGOUTS = data[0];
        self.AGINS = data[1];
        self.units = data[2];
        self.fetchList();
      })
      .catch(err => {
        self.fetchList();
      });
  },
  methods: {
    getVal(expression) {
      let self = this;
      eval(expression);
    },
    // 获取数据
    fetchList() {
      this.loading = true;
      api
        .bannerlist(this.page)
        .then(data => {
          this.loading = false;
          this.tableData = data.list || [];
          this.total = data.count || 0;
        })
        .catch(error => {
          this.loading = false;
        });
    },
    // 未上传成绩
    queryScore() {
      api
        .bannerScore({})
        .then(data => {
          if (data) {
            this.bannerScore = data.nogameState;
          }
        })
        .catch(error => {});
    },
    hrefScore() {
      this.$router.push({
        path: "/game-score-management/match/"
      });
    },
    hrefStatus() {
      this.$router.push({
        path: "/game-verify-management/game-audit"
      });
    },
    //待审核赛事
    queryStatus() {
      api
        .bannerStatus({})
        .then(data => {
          if (data) {
            this.bannerStatus = data.noStatus;
          }
        })
        .catch(error => {});
    },
    // 分页
    changePage(pageNum) {
      this.page.pageNo = pageNum;
      this.fetchList();
    }
  }
};
</script>

<style lang="less" scoped>
.ivu-card-head p {
  font-size: 21px;
  color: #999;
}
.content-wrapper .ivu-card-head {
  border-bottom: none;
}
.box {
  display: inline-block;
  width: 50%;
  text-align: center;
  padding-top: 30px;
}
.admin {
  color: #66cc99;
  font-size: 30px;
  font-weight: bold;
}
.date {
  font-size: 30px;
  color: #9b9b9b;
  text-align: right;
}
.table-title {
  font-size: 20px;
  padding-bottom: 15px;
}
.ivu-card-bordered {
  min-height: 175px;
}
.number {
  font-size: 30px;
  color: #58b382;
}
.p-title {
  font-size: 27px;
  color: #999;
}
</style>
